1.5 JavaScript Basics: Animation and Sound Effects

Welcome back, young game developers! In our previous lesson, we learned how to make Mario move and jump. Today, we're going to add some magic to our game by introducing animations and sound effects. Get ready to bring our Super Mario Bros. game to life!

The Power of Animation in Web Games

Imagine reading a book where the pictures suddenly start moving. That's what animation does to our game! It makes everything feel alive and exciting. In web games, animations help to:

Make characters and objects move realistically
Show changes in the game world
Give feedback to the player's actions
Create a more immersive and enjoyable experience

Common Ways to Create Web Game Animations

There are several ways to create animations in web games. Let's look at some of the most popular methods:

CSS Animations: These are great for simple, repetitive animations.
JavaScript Animations: These give us more control and allow for complex animations.
Sprite Animations: These use a series of images to create the illusion of movement.
GIF Animations: These are pre-made animations that can be easily added to your game.
Canvas Animations: Drawing and animating objects on an HTML5 canvas.

In our Super Mario Bros. game, we'll use a combination of these methods to bring Mario to life!

The Magic of Sound in Web Games

Sound effects and music are the soul of a game. They can:

Create an immersive atmosphere
Provide feedback for player actions
Build excitement and emotion
Enhance the overall gaming experience

Implementing Sound in Web Games

To add sound to our web game, we'll use the HTML5 <audio> element and control it with JavaScript. Here are the basic steps:

Create an <audio> element in HTML
Load sound files (usually in MP3 or OGG format)
Use JavaScript to play, pause, or stop sounds based on game events

Now, let's enhance our Super Mario Bros. game with some awesome animations and sound effects!

Enhancing Our Super Mario Bros. Game

Now, let's add some exciting new features to our game!

1. Jumping Animation

When Mario jumps, we want to show a different image. Let's update our jump function:

function jump() {
  isJumping = true;
  let jumpHeight = 0;
  mario.style.backgroundImage =
    "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_jump.png')";
  const jumpInterval = setInterval(() => {
    if (jumpHeight >= 150) {
      clearInterval(jumpInterval);
      fall();
    } else {
      jumpHeight += 5;
      mario.style.bottom = `${150 + jumpHeight}px`;
    }
  }, 10);
}

function fall() {
  let fallHeight = 150;
  const fallInterval = setInterval(() => {
    if (fallHeight <= 0) {
      clearInterval(fallInterval);
      mario.style.bottom = "150px";
      isJumping = false;
      mario.style.backgroundImage =
        "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png')";
    } else {
      fallHeight -= 5;
      mario.style.bottom = `${150 + fallHeight}px`;
    }
  }, 10);
}

2. Running Animation

Let's make Mario run when he moves left or right:

let isFacingRight = true;

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowRight") {
    position += 10;
    mario.style.left = `${position}px`;
    mario.style.backgroundImage =
      "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_run.gif')";
    mario.style.transform = "scaleX(1)";
    isFacingRight = true;
  } else if (e.key === "ArrowLeft") {
    position -= 10;
    mario.style.left = `${position}px`;
    mario.style.backgroundImage =
      "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_run.gif')";
    mario.style.transform = "scaleX(-1)";
    isFacingRight = false;
  } else if (e.code === "Space" && !isJumping) {
    jump();
  }
});

document.addEventListener("keyup", (e) => {
  if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
    mario.style.backgroundImage =
      "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png')";
    mario.style.transform = isFacingRight ? "scaleX(1)" : "scaleX(-1)";
  }
});

3. Jumping While Moving

We'll modify our jump function to maintain Mario's horizontal movement during a jump:

function jump() {
  isJumping = true;
  let jumpHeight = 0;
  mario.style.backgroundImage =
    "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_jump.png')";
  const jumpInterval = setInterval(() => {
    if (jumpHeight >= 150) {
      clearInterval(jumpInterval);
      fall();
    } else {
      jumpHeight += 5;
      mario.style.bottom = `${150 + jumpHeight}px`;

      // Continue horizontal movement if a direction key is pressed
      if (isMovingRight) {
        position += 5;
        mario.style.left = `${position}px`;
      } else if (isMovingLeft) {
        position -= 5;
        mario.style.left = `${position}px`;
      }
    }
  }, 10);
}

4. Adding Sound Effects

Let's add background music and a jump sound effect:

<audio id="backgroundMusic" loop>
  <source
    src="https://www.weblab.fun/audio/tutorials_frontend_development/mario_game/background_music.mp3"
    type="audio/mpeg"
  />
</audio>
<audio id="jumpSound">
  <source
    src="https://www.weblab.fun/audio/tutorials_frontend_development/mario_game/jump_small.mp3"
    type="audio/mpeg"
  />
</audio>

Now, let's control these sounds with JavaScript:

const backgroundMusic = document.getElementById("backgroundMusic");
const jumpSound = document.getElementById("jumpSound");

let isMusicPlaying = false;

document.addEventListener("keydown", (e) => {
  if (!isMusicPlaying) {
    backgroundMusic.play();
    isMusicPlaying = true;
  }

  if (e.code === "Space" && !isJumping) {
    jumpSound.currentTime = 0;
    jumpSound.play();
    jump();
  }
  // ... (rest of the keydown event listener)
});

Putting It All Together

Here's our updated game with all these new features:

http://localhost:3000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Super Mario Bros.</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <style>
      /* ... (CSS remains the same) ... */
    </style>
  </head>
  <body>
    <div class="game-container">
      <!-- ... (HTML structure remains the same) ... -->
    </div>
    <audio id="backgroundMusic" loop>
      <source
        src="https://www.weblab.fun/audio/tutorials_frontend_development/mario_game/background_music.mp3"
        type="audio/mpeg"
      />
    </audio>
    <audio id="jumpSound">
      <source
        src="https://www.weblab.fun/audio/tutorials_frontend_development/mario_game/jump_small.mp3"
        type="audio/mpeg"
      />
    </audio>
    <script>
      const mario = document.querySelector(".mario");
      const backgroundMusic = document.getElementById("backgroundMusic");
      const jumpSound = document.getElementById("jumpSound");
      let position = 50;
      let isJumping = false;
      let isFacingRight = true;
      let isMovingRight = false;
      let isMovingLeft = false;
      let isMusicPlaying = false;

      document.addEventListener("keydown", (e) => {
        if (!isMusicPlaying) {
          backgroundMusic.play();
          isMusicPlaying = true;
        }

        if (e.key === "ArrowRight") {
          isMovingRight = true;
          position += 10;
          mario.style.left = `${position}px`;
          if (!isJumping)
            mario.style.backgroundImage =
              "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_run.gif')";
          mario.style.transform = "scaleX(1)";
          isFacingRight = true;
        } else if (e.key === "ArrowLeft") {
          isMovingLeft = true;
          position -= 10;
          mario.style.left = `${position}px`;
          if (!isJumping)
            mario.style.backgroundImage =
              "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_run.gif')";
          mario.style.transform = "scaleX(-1)";
          isFacingRight = false;
        } else if (e.code === "Space" && !isJumping) {
          jumpSound.currentTime = 0;
          jumpSound.play();
          jump();
        }
      });

      document.addEventListener("keyup", (e) => {
        if (e.key === "ArrowRight") {
          isMovingRight = false;
        } else if (e.key === "ArrowLeft") {
          isMovingLeft = false;
        }

        if (!isMovingRight && !isMovingLeft && !isJumping) {
          mario.style.backgroundImage =
            "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png')";
          mario.style.transform = isFacingRight ? "scaleX(1)" : "scaleX(-1)";
        }
      });

      function jump() {
        isJumping = true;
        let jumpHeight = 0;
        mario.style.backgroundImage =
          "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_jump.png')";
        const jumpInterval = setInterval(() => {
          if (jumpHeight >= 150) {
            clearInterval(jumpInterval);
            fall();
          } else {
            jumpHeight += 5;
            mario.style.bottom = `${150 + jumpHeight}px`;

            if (isMovingRight) {
              position += 5;
              mario.style.left = `${position}px`;
            } else if (isMovingLeft) {
              position -= 5;
              mario.style.left = `${position}px`;
            }
          }
        }, 10);
      }

      function fall() {
        let fallHeight = 150;
        const fallInterval = setInterval(() => {
          if (fallHeight <= 0) {
            clearInterval(fallInterval);
            mario.style.bottom = "150px";
            isJumping = false;
            if (isMovingRight || isMovingLeft) {
              mario.style.backgroundImage =
                "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario_run.gif')";
            } else {
              mario.style.backgroundImage =
                "url('https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png')";
            }
          } else {
            fallHeight -= 5;
            mario.style.bottom = `${150 + fallHeight}px`;

            if (isMovingRight) {
              position += 5;
              mario.style.left = `${position}px`;
            } else if (isMovingLeft) {
              position -= 5;
              mario.style.left = `${position}px`;
            }
          }
        }, 10);
      }

      const goomba = document.querySelector(".goomba");
      let goombaPosition = 500;
      let goombaDirection = -1;

      function moveGoomba() {
        goombaPosition += goombaDirection;
        goomba.style.left = `${goombaPosition}px`;

        if (goombaPosition <= 0 || goombaPosition >= 800) {
          goombaDirection *= -1;
        }

        requestAnimationFrame(moveGoomba);
      }

      moveGoomba();
    </script>
  </body>
</html>

Conclusion

Congratulations! You've just leveled up your Super Mario Bros. game with awesome animations and sound effects. Let's break down what we've added:

Jumping Animation: We've updated Mario's image when he jumps.
Running Animation: Mario now has a running animation when moving left or right.
Directional Facing: Mario faces the direction he's moving.
Jumping While Moving: Mario can now jump while moving left or right.
Background Music: The classic Super Mario Bros. theme plays when you start interacting with the game.
Jump Sound Effect: You hear a "boing" sound when Mario jumps.

These additions make our game much more lively and engaging. The animations provide visual feedback to the player, while the sound effects add another layer of immersion.

What's Next?

Now that we've added animations and sound to our game, it's starting to feel more like the real Super Mario Bros.! In our next lesson, we'll learn about collision detection. This will allow Mario to interact with the blocks, collect coins, and avoid enemies. Get ready for more excitement as we continue to build our web-based Super Mario Bros. game!

Remember, young coders, the key to becoming a great game developer is practice and creativity. Keep experimenting with different animations and sounds to make your game unique and fun!

Additional Resources

To learn more about animations and sound in web development, check out these helpful resources:

Keep coding, and let's-a go to the next level!

The Power of Animation in Web Games​

Common Ways to Create Web Game Animations​

The Magic of Sound in Web Games​

Implementing Sound in Web Games​

Enhancing Our Super Mario Bros. Game​

1. Jumping Animation​

2. Running Animation​

3. Jumping While Moving​

4. Adding Sound Effects​

Putting It All Together​

Conclusion​

What's Next?​

Additional Resources​